<template>
  <Popup :show="show" position="bottom" class="confirm-bet">
    <div class="shureAddcancel">
      <!--头部-->
      <div class="confirm-bet-head">
        <div class="left">确认投注</div>
        <div class="right" @click="close">
          <div class="tips">单期最高派奖{{ numberToChinese(allGame?.[currentGame]?.maxReward) }}万</div>
          <Icon size="20" color="rgba(107, 144, 255, 1)" name="arrow-down" />
        </div>
      </div>
      <!---投注记录-->
      <div class="shurebox">
        <CellGroup>
          <div class="shureli" v-for="(item, index) in investStore.investList" :key="index">
            <div class="li0" v-if="item.lotteryCode === 'QXC'">
              {{ playNameConvert[item.sonPlayTypeCode] }}#{{
                playNameConvert[item.betContent] || item.betContent.replace(/\s/g, ',')
              }}
            </div>
            <div class="li1" v-else>{{ setPlayName(item) }}</div>
            <Field
              class="li22"
              center
              title="money"
              input-align="center"
              v-model="item.betAmount"
              :disabled="disabledInput"
              type="digit"
              :maxlength="moneyLength"
              @input="investStore.changeAnAmount({ index, item })"
              placeholder="请输入..."
            />
            <div class="li3">赔率{{ item.maxOdds }}</div>
            <div class="li4" @click="handlerDelete(index, item)">
              <img src="@/assets/img/delect.png" alt="" />
            </div>
          </div>
          <div style="width: 100%; height: 50px"></div>
        </CellGroup>
      </div>
    </div>
  </Popup>
</template>

<script setup lang="ts">
import { numberToChinese } from '@/utils'
import { useGameStore } from '@/stores/game'
import { useInvestStore } from '@/stores/invest'
import { playNameConvert } from '@/config/qixingcai'
import { storeToRefs } from 'pinia'
import { Field, CellGroup, Popup, Icon } from 'vant'

const moneyLength = 6
const geweiqiuEnum = {
  DYWQ: '第一位球',
  DEWQ: '第二位球',
  DSWQ: '第三位球',
}

type Props = {
  disabledInput: boolean
  show: boolean
}

defineProps<Props>()

const gameStore = useGameStore()

const { allGame, currentGame } = storeToRefs(gameStore)

const investStore = useInvestStore()

const emits = defineEmits(['update:show', 'delSingle'])
const close = () => {
  emits('update:show', false)
}

const setPlayName = ({ playName, sonPlayTypeCode, spliceName }) => {
  const preName = geweiqiuEnum[sonPlayTypeCode]
  return spliceName ?? `${preName ? `${preName} / ` : ''}${playName}`
}

// 删除单个注单
const handlerDelete = (index: number, item: any) => {
  investStore.deleteAnInvest(index)
  emits('delSingle', item)
}
</script>

<style lang="less" scoped>
@import './common.less';

.confirm-bet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(30, 31, 49, 1);
  border-radius: 16px;

  .left {
    width: 153px;
    height: 25px;
    background: url('@/assets/img/game/confirm_bet_head.png') center center no-repeat;
    background-size: contain;
    font-size: 14px;
    padding-left: 27px;
    box-sizing: border-box;
    line-height: 25px;
    text-align: left;
  }

  .right {
    display: flex;
    align-items: center;
    padding-right: 14px;

    .tips {
      margin-right: 16px;
      color: rgba(142, 103, 255, 1);
    }
  }
}

.confirm-bet {
  max-height: 8.76rem;
  background: rgba(30, 31, 49, 1);
  border-radius: 16px 16px 0 0;
  padding-bottom: 129px;
}

.shureAddcancel {
  height: auto;
  box-sizing: border-box;
  background: #1e1f31;

  .shurebox {
    margin: 8px 7px;
    background: rgba(33, 33, 58, 1);
  }
}

.shurebox {
  max-height: 260px;
}
</style>
